const path = require('path');
// 引入插件
// 自动打开服务器
const browopen=require("open-browser-webpack-plugin");
// 将模板html文件打包并编译进dist文件夹中
const HTMLTemp=require("html-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 省略后缀名,引入的js或者jsx的文件在引入时候可以写成import "./css/index.js"=>import "./css/index"
  reslove:{
    extensions:['.js','jsx']
  },
  module:{
    rules:[
      {
        test:/\.(js|jsx)$/,
        use:{
          loader:"babel-loader",
          options:{
            // 意思是将es6转为es5来执行
            presets:["es2015"]
          }
        }    
      },
      // 添加css的配置
      {
        test:/\.css$/,
        use:[
           {loader:"style-loader"},
           {loader:"css-loader"}
        ]
      },
       // 添加图片的配置
      {
        test:/\.(jpg|png|gif|jpeg|svg)$/,
        use:[
          {
            loader:"url-loader",
            options: {
              name: 'images/[name].[ext]',
              // 图片大于8m就压缩
              limit:8192
            }
          },
        ]
      }
    ]
  },
  // 插件的设置
  plugins:[
    new browopen({
      url:"http://localhost:8080"
    }),
    // HTML模板
    new HTMLTemp({
      template:__dirname+"/src/index.temp.html"
    }),
  ]
};